<template>
  <div class="w750">
    <!-- 积分商品详情 -->
    <div class="integral-detail">
      <!-- banner -->
      <div class="det-banner">
        <ul class="pro-img clearfix">
          <li><img :src="$imgUrlHead + detailData.prodImage" alt=""></li>
        </ul>
        <!-- <ul class="pro-page">
          <li class="on">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul> -->
        <!--<van-swipe :autoplay="3000" indicator-color="white" :show-indicators="detailData.prodImage && detailData.prodImage.length>1 ? true : false">-->
          <!--<van-swipe-item v-for="(item,index) in detailData.prodImage" :key="index"><img :src="$imgUrlHead + item" @click="imagePreview(index)" alt=""></van-swipe-item>-->
        <!--</van-swipe>-->
      </div>
      <!-- /banner -->
      <!-- 名字,价格,数量 -->
      <div class="goods-msg">
        <div class="left">
          <span class="name">{{detailData.name}}</span>
          <div class="price-box">
            <span class="price">{{detailData.exchangeIntegral}}</span>
            <span class="sale-price">市场价<span class="old-price">{{detailData.price}}元</span></span>
          </div>
          <div class="limit-num" v-if="detailData.isLimit">限购数量：{{detailData.limitNum}} 件</div>
        </div>
        <div class="right">
          <div class="num">
            <span class="sub-a"  @click="reduce">-</span>
            <input type="number" v-model="detailData.basketCount" class="sub-input" @keyup="changeGoodsNum">
            <span class="sub-a" @click="add">+</span></div>
          <div class="rest">剩余<span class="rest-span">{{detailData.prodStock}}</span>件</div>
        </div>
      </div>
      <!-- /名字,价格,数量 -->
      <!-- 商品介绍 -->
      <div class="goods-introduction">
        <div class="int-tit"><span class="txt">商品介绍</span></div>
        <!--<div class="int-con">· 进口触面感；粉底白色面；软皮<br>· 颜色：白色<br>· 尺寸：350mm*780mm<br>· 码数：欧码<br>商品会在交易成功后两个工作日内安排发货，请您在确认商品完好后再签收</div>-->
        <div v-html="detailData.prodDesc" id="commCotent3"></div>
        <div class="empty" v-if="!detailData.prodDesc || !detailData.prodDesc.length">
          <div class="item-img"><img src="../../assets/images/comment-empty.png" alt=""></div>
          <div class="item-txt">暂时没有商品详情</div>
        </div>
      </div>
      <div style="height: 60px;width: 100%;">

      </div>
      <!-- /商品介绍 -->
      <div class="foot-btn">
        <div class="exchanged"><span class="txt">{{detailData.saleNum}}</span>人已兑换</div>
        <a href="javascript:;" @click="goSubmit" class="btn">立即兑换</a>
      </div>
    </div>
    <!-- /积分商品详情 -->
  </div>
</template>

<script>
  import { pointsDetail,myIntegral } from "api/pointsApi";
  export default {
    components: {

    },
    data() {
      return {
        detailData: '',            //详情
        curIntegral: '',          //获取用户积分余额
      };
    },
    mounted() {
      let that = this

      //获取积分商品详情
      pointsDetail({id:this.$route.query.id}).then( res => {
        if (this.$route.query.id) {
            if(res.status ==1) {
              res.result['basketCount'] = 1
              this.detailData = res.result
            }else {
              this.$toast(res.msg)
            }
        } else {
            this.$toast({duration: 1000,message:"该商品已被删除"})
        }

      }),

      //获取用户积分余额
      myIntegral().then(res => {
        if(res.status == 1){
          this.curIntegral = res.result
        }else{
          this.$toast(res.msg)
        }
      })
    },
    methods: {
      //减少商品数量
      reduce() {
        if (this.detailData.basketCount <= 1) {
          this.$toast('购买的数量不能为空')
          return;
        }
        this.detailData.basketCount--;
      },

      //增加商品数量
      add() {
        this.detailData.basketCount++;
        if (this.detailData.basketCount > this.detailData.prodStock) {
          this.$toast("选择的数量超过了库存");
          this.detailData.basketCount = this.detailData.prodStock;
          return;
        }
      },

      //手动输入货物数量
      changeGoodsNum() {
        if (this.detailData.basketCount <= 0) {
          this.detailData.basketCount = 1;
          this.$toast("请输入正确数量");
        } else if (this.detailData.basketCount > this.detailData.prodStock) {
          this.detailData.basketCount = this.detailData.prodStock;
          this.$toast("数量超过库存");
        }
      },

      //提交积分订单
      goSubmit() {
        if (this.detailData.basketCount*this.detailData.exchangeIntegral<this.curIntegral) {
            if(this.detailData.basketCount > 0) {
              this.$router.push({
                  path: `/submitOrder`,
                  query: {
                    count: this.detailData.basketCount,
                    id: this.detailData.id
                  }
              });

            }else {
              this.$toast('商品数量不能小于1')
            }
            this.detailData.basketCount
        } else {
          this.$toast({duration: 2000,message:'用户积分不足,您的积分余额为：'+this.curIntegral})
        }
      },
    }
  };
</script>


<style src="../../assets/css/integral-detail.css" scoped></style>
<style src="../../assets/css/empty.css" scoped></style>
<style lang="stylus">
  #commCotent3{
    width 100%
    img {
      max-width:100% !important; 
      height: auto !important;
    }
    a {
      width: 100% !important;
    }
    div {
      width: 100% !important;
    }
    ul {
      width: 100% !important;
    }
    li {
      width: 100% !important;
    }
  }
</style>
